<template>
	<view class="release">
		<u-tabs :list="typeArr" @click="change"  :inactiveStyle="{
				fontSize: '30rpx',
				fontWeight: '400',
				color: 'rgba(0,0,0,0.5)',
			}" :activeStyle="{
				fontSize: '40rpx',
				fontWeight: '600',
				color: '#000000',
			}" :itemStyle="{height: '44px'}" lineWidth="20rpx" lineColor="rgba(0,0,0,0.5)" @change="change">
		</u-tabs>

		<scroll-view scroll-y="true" class="main" @scrolltolower="lower()"  @refresherrefresh="onRefresh" :refresher-enabled="true" :refresher-triggered="triggered">
			<view class="list">
				<view class="item" :class="{up: index == 0}" v-for="(item,index) of list"
					@click="goto(`pages/forum/detail?id=${item.id}`)">
					<view class="title flex" :class="{top: item.is_top == 1}">
						<image v-if="item.is_top == 1" src="../../static/videoShoppingDetail/up.png" mode=""></image>
						[{{item.infocate}}]{{item.name}} <image v-if="item.video" style="width: 38rpx;height: 38rpx;vertical-align: middle;padding-left: 5rpx;" src="../../static/video.png" mode=""></image>
					</view>
					<view class="bottom flex f-y-c f-x-b">
						<view class="user flex f-y-c">
							<view class="image bgImg" :style="{backgroundImage: `url(${item.userInfo.avatar})`}"></view>
							<view class="name">{{item.userInfo.nickname}}</view>
						</view>
						<view class="time">{{item.createtime | date}} 发布</view>
					</view>
				</view>
			</view>
			<u-empty v-if="list.length === 0 && finish" mode="data" marginTop="100">
			</u-empty>
		</scroll-view>
		<image src="../../static/add.png" class="add" mode="" @click="authTo('pages/forum/forum')"></image>
		
		
		<u-tabbar
			:value="value1"
			@change="click1"
			:fixed="true"
			:placeholder="true"
			activeColor="#FEBF4E"
			:safeAreaInsetBottom="true"
		>
			<u-tabbar-item text="首页">
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../../static/tab/indexA.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../../static/tab/indexA.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="服务">
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../../static/tab/serveA.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../../static/tab/serveA.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="二手">
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../../static/tab/uploada.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../../static/tab/uploada.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="招聘">
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../../static/tab/releaseA.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../../static/tab/releaseA.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="我的">
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../../static/tab/myA.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../../static/tab/myA.png"
				></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeArr: [{
					id: '',
					name: '全部'
				}],
				page: 1,
				finish: false,
				type: '',
				list: [],
				had: false,
				triggered: false,
				_freshing: false,
				refreshText: '',
				lock: false,
				
				value1:5,
			};
		},
		onLoad() {
			this.getType();
		},
		onShareTimeline(){
		    return{
		      title:'蕲春批发零售找半柿，找商家谈合作快人一步',  //分享的标题
		      query:'pages/common/convenience',     //点击分享链接之后进入的页面路径
		      imageUrl:'', // 设置分享卡片图片
		    }
		},
		// onShow() {
		// 	if(this.had){
		// 		this.reload()
		// 	}
		// },
		methods: {
			click1(e) {
				console.log('click1', e);
				if(e==0){
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else if(e == 1){
					uni.switchTab({
						url:'/pages/serve/newserve'
					})
				}else if(e == 2){
					uni.switchTab({
						url:'/pages/index/indexa'
					})
					fail((e)=>{
					})
				}else if(e == 3){
					uni.switchTab({
						url:'/pages/release/release'
					})
					fail((e)=>{
					})
				}else if(e == 4){
					uni.switchTab({
						url:'/pages/my/my'
					})
					fail((e)=>{
					})
				}
			},
			onRefresh() {
				
				if (this._freshing) return;
				this.refreshText = "刷新中...";
				this._freshing = true;
				if (!this.triggered) //界面下拉触发，triggered可能不是true，要设为true  
					this.triggered = true;
				this.reload()
			},
			getType() {
				uni.$u.http.post('/infocate').then(res => {
					if (res.code == 1) {
						this.typeArr = this.typeArr.concat(res.data)
						this.type = ''
						this.had = true
						this.getList()

					}
				}).catch((res) => {

				})
			},
			change(e) {
				this.type = e.id
				this.reload()
			},
			reload() {
				this.page = 1
				this.finish = false
				this.list = []
				this.getList()
			},
			lower() {
				this.page++
				this.getList()
			},
			getList() {
				if (this.finish) {
					return
				}
				uni.$u.http.post('/infolist', {
					page: this.page,
					cate_id: this.type
				}).then(res => {
					this.lock = false
					this.triggered = false;
					this._freshing = false;
					if (res.code == 1) {
						console.log(res.data)
						for (let i = 0; i < res.data.length; i++) {
							if (res.data[i].images) {
								res.data[i].images = res.data[i].images.map(value => {
									return this.oss(value)
								})
							}

						}
						console.log(res.data)
						this.list = this.list.concat(res.data)
						if (res.data.length === 0) {
							this.finish = true
						}
					}
				}).catch((res) => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.release {
		position: relative;
		height: 100vh;

		.add {
			position: fixed;
			right: 30rpx;
			bottom: 100rpx;
			width: 120rpx;
			height: 120rpx;
		}

		.main {
			position: absolute;
			left: 0;
			top: 100rpx;
			overflow: hidden;
			background: #F6F6F6;
			bottom: 0;

			.list {
				padding: 20rpx;
				background: #fff;
				padding: 0 32rpx;

				.item {
					padding: 51rpx 0 40rpx;
					border-bottom: 1rpx solid #EAEAEA;

					.title {
						font-size: 32rpx;
						font-weight: 600;
						line-height: 1.3;
						color: #000000;

						&.up {
							color: #EA0000;
						}

						image {
							width: 38rpx;
							height: 38rpx;
							flex-shrink: 0;
							margin-right: 10rpx;
							transform: translateY(4rpx);
						}
					}
					.top{
						color: #EA0000;
					}

					.bottom {
						margin-top: 35rpx;

						.user {
							.image {
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
								background-color: #D8D8D8;
								margin-right: 15rpx;
							}

							.name {
								font-size: 30rpx;
								font-weight: 400;
								color: rgba(0, 0, 0, 0.8);
							}
						}

						.time {
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(0, 0, 0, 0.3);
						}
					}
				}
			}
		}
	}
	
	
	.u-page__item__slot-icon {
		width: 32rpx;
		height: 32rpx;
	}
</style>
